<template>
  <div class="divider"><input type="text" @keydown="keydown" @input="input" v-model="prevVal"></div>
</template>
<script>
function stop(ev) {
  ev.preventDefault();
  ev.stopPropagation();
}
export default {
  name: 'popup',
  props: ["conf"],
  data(){
    return {
      prevVal: "",
    }
  },
  watch: {
    prevVal(val){
      if (!/^[\.0-9]*$/.test(val)) this.prevVal = "";
      this.conf && (this.conf.val = + this.prevVal || 0);
    }
  },
  methods:{
    input(ev){
    },
    keydown(ev){
      const aviKey = [8, 16, 17, 18, 35, 36, 110, 190];
      if (
        (ev.which >= 48 && ev.which <= 57) ||
        (ev.which >= 96 && ev.which <= 105) ||
        aviKey.includes(ev.which)
      ) {
        const reg = this.conf && this.conf.reg || /[^\.]*\.\d{2}/;
        if (
          (ev.which === 110 && /\./.test(ev.target.value)) ||
          (reg.test(ev.target.value) && ev.which !== 8)
        ) {
          stop(ev);
        }
      } else {
        stop(ev);
      }
    }
  }
}
</script>
<style scoped>
  .divider{
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    color: #999;
    align-items: center;
    display: flex;
  }
  input{
    background-color: red;
    line-height: 40px;
    color: #fff;
    padding: 0 10px;
  }
</style>
